<template>
  <j-modal
    title="算法库"
    :width="1000"
    switchFullscreen
    :fullscreen="false"
    :draggable="true"
    :okButtonProps="{ class: { 'jee-hidden': true } }"
    @cancel="handleCancel"
    :cancelButtonProps="{ class: { 'jee-hidden': true } }"
    :visible="visible"
    :body-style="{ padding: '0px' }"
    class="ai-sfk-modal"
    centered
  >
    <a-card :bordered="false">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="">
                <j-input
                  placeholder="请输入算法名称"
                  style="background-color: #393939; border-color: #747474; color: #ddd"
                  v-model="queryParam.formulaName"
                ></j-input>
                <!-- <a-input-search placeholder="请输入算法名称"  enter-button="查询"  style="background-color: #393939; border-color: #747474;color:#ddd;" size="large" v-model="queryParam.formulaName" @search="searchQuery" />  -->
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- 查询区域-END -->
      <div style="height: 500px; overflow: hidden auto">
        <a-list :grid="{ gutter: 24, lg: 3, md: 2, sm: 1, xs: 1 }" :dataSource="dataSource" :loading="confirmLoading">
          <a-list-item slot="renderItem" slot-scope="item, index">
            <a-card  :hoverable="true" :bordered="false" :bodyStyle="{backgroundColor:'#4c4d4d'}">
              <a-row type="flex">
                <a-col flex="auto">{{ item.formulaName }}</a-col>
                <a-col flex="50px">
                  <a-tooltip title="开始运算">
                    <a-icon type="play-circle" :style="{ fontSize: '24px', color: '#08c' }" @click="handleRun(item)"
                  /></a-tooltip>
                </a-col>
              </a-row>
            </a-card>
          </a-list-item>
        </a-list>
      </div>
    </a-card>
    <run-modal ref="runModal"></run-modal>
  </j-modal>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import RunModal from '@/views/corp/userFormula/run'
import store from '@/store/'
import '@/assets/less/TableExpand.less'

export default {
  name: 'UserFormulaList',
  mixins: [JeecgListMixin],
  components: {
    RunModal,
  },
  data() {
    return {
      description: '算法库',
      visible: false,
      confirmLoading: false,
      url: {
        list: '/userFormula/userFormula/list',
      },
      dictOptions: {},
      superFieldList: [],
      dataSource: [],
    }
  },
  created() {},
  computed: {},
  methods: {
    initDictConfig() {},
    searchQuery() {
      this.getList()
    },
    getList() {
      var that = this
      that.dataSource = [];
      that.confirmLoading = true
      getAction(this.url.list, { pageSize: 9999, formulaName: this.queryParam.formulaName }).then((res) => {
        that.confirmLoading = false
        if (res.success) {
          that.dataSource = res.result.records
        } else {
          that.$message.error(res.message)
        }
        that.confirmLoading = false
      })
    },
    show() {
      this.visible = true
      this.getList()
    },
    handleCancel() {
      this.visible = false
    },
    handleRun: function (record) {
      this.$refs.runModal.show(record)
    },
  },
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
table:hover,
tr:hover,
thead:hover {
  background: #20293c !important;
}

.ai-sfk-modal {
  /deep/.ant-modal-content {
    background: transparent;
  }
  /deep/.ant-modal-footer {
    border: none;
  }
  /deep/.ant-modal-header,
  .ant-card,
  .ant-card-body {
    background-color: rgba(255, 255, 255, 0.2); /* 半透明背景 */
    backdrop-filter: blur(20px); /* 背景模糊 */
    -webkit-backdrop-filter: blur(10px); /* 兼容老版本 Safari */
    color: #ddd;
    border-bottom: 0px;
  }
  /deep/.ant-modal-title,
  /deep/.ant-modal-close {
    color: #ccc;
  } 

  /deep/.ant-pagination {
    color: #fff;
    .ant-pagination-item a {
      color: #fff;
    }
    .ant-pagination-item-active a {
      color: #1890ff;
    }
    .ant-pagination-item-link {
      background: #ccc;
    }
  }
}
</style>